import React from 'react';
import { Form, Row, Col, InputNumber } from 'antd';
import { SalaryYearInput, SalaryMonthInput } from '@/pages/Recruitment/components/SalaryInput';
import SalaryRefTable from '@/components/SalaryRefTable';
import useSalaryData from '@/components/SalaryRefTable/useSalaryData';
import { formatToThreePart } from '@/utils/utils';
import { SelectPositionAndRank } from '@/pages/Recruitment/containers/select';
import { useSalaryChange } from '@/pages/Recruitment/Hire/hooks';

import styles from '../index.less';

export default function SuggestSalary({ form, commInfo, isSecond, isEdit, talentInfo, renderItem, oneLineLayout }) {
    const { getFieldDecorator } = form;
    const handleChangeSalary = useSalaryChange(form);

    const positionCode = form?.getFieldValue('positionCode') ?? talentInfo.positionCode;
    const { dataSource, targetCity, selectCity, selectSalaryData } = useSalaryData({
        positionCode,
        cityDictValue: talentInfo.companyAreaCode
    });
    const suggestSalaryReference = selectSalaryData?.q50;

    // 初始建议月薪
    const initSuggestedYearSalary =
        commInfo?.recruitEmployMoreCommunicateSalaryVO?.newSuggestedYearSalary ||
        commInfo?.recruitSalaryRecordVO?.suggestedYearSalary ||
        form?.getFieldValue('salarySaveDTO.suggestedYearSalary') ||
        suggestSalaryReference;

    React.useEffect(() => {
        handleChangeSalary('salarySaveDTO.suggestedYearSalary', initSuggestedYearSalary);
    }, [initSuggestedYearSalary]);

    // 二次沟通的表单差异
    const renderContent = () => {
        if (isSecond && isEdit) {
            return (
                <Row>
                    <Col span={12}>
                        <Form.Item label="原建议年薪">
                            {formatToThreePart(commInfo?.recruitEmployMoreCommunicateSalaryVO?.oldSuggestedYearSalary)}
                            <span style={{ marginLeft: 8 }}>
                                {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode}
                            </span>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="原建议月薪">
                            {formatToThreePart(commInfo?.recruitEmployMoreCommunicateSalaryVO?.oldSuggestedMonthSalary)}
                            <span style={{ padding: '0 5px' }}>X</span>
                            {commInfo?.recruitEmployMoreCommunicateSalaryVO?.oldSuggestedMonthNumber}
                            <span style={{ marginLeft: 8 }}>
                                {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode || '月'}
                            </span>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="新建议年薪">
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                {getFieldDecorator('salarySaveDTO.suggestedYearSalary', {
                                    initialValue: initSuggestedYearSalary,
                                    rules: [
                                        {
                                            required: true,
                                            message: '建议年薪不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        // formatter={formatToThreePart}
                                        min={0}
                                        style={{ width: '100%' }}
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.suggestedYearSalary', value);
                                        }}
                                        formatter={val => SalaryYearInput(val, true)}
                                        parser={val => SalaryYearInput(val)}
                                    />
                                )}
                                {(talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode) && (
                                    <span style={{ marginLeft: 8 }}>
                                        {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode}
                                    </span>
                                )}
                            </div>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="新建议月薪">
                            {renderItem(
                                <div className={styles.formLineWrap}>
                                    <Form.Item style={{ flex: 1 }}>
                                        {getFieldDecorator('salarySaveDTO.suggestedMonthSalary', {
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '新建议月薪不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                style={{ width: '100%' }}
                                                // formatter={formatToThreePart}
                                                placeholder="请输入新建议月薪"
                                                onChange={value => {
                                                    handleChangeSalary('salarySaveDTO.suggestedMonthSalary', value);
                                                }}
                                                formatter={val => SalaryMonthInput(val, true)}
                                                parser={val => SalaryMonthInput(val)}
                                            />
                                        )}
                                    </Form.Item>
                                    <span style={{ padding: '0 5px' }}>X</span>
                                    <Form.Item>
                                        {getFieldDecorator('salarySaveDTO.suggestedMonthNumber', {
                                            initialValue:
                                                commInfo?.recruitEmployMoreCommunicateSalaryVO
                                                    ?.newSuggestedMonthNumber || 16,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '月份不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                onChange={value => {
                                                    handleChangeSalary('salarySaveDTO.suggestedMonthNumber', value);
                                                }}
                                                min={12}
                                            />
                                        )}
                                    </Form.Item>
                                    <span style={{ marginLeft: 8 }}>
                                        {talentInfo?.employSalaryCurrencyCode ||
                                            talentInfo?.companyCurrencyCode ||
                                            '月'}
                                    </span>
                                </div>,
                                <>
                                    {formatToThreePart(
                                        commInfo?.recruitEmployMoreCommunicateSalaryVO?.newSuggestedMonthSalary
                                    )}
                                    <span style={{ padding: '0 5px' }}>X</span>
                                    {commInfo?.recruitEmployMoreCommunicateSalaryVO?.newSuggestedMonthNumber}
                                    <span style={{ marginLeft: 8 }}>
                                        {talentInfo?.employSalaryCurrencyCode ||
                                            talentInfo?.companyCurrencyCode ||
                                            '月'}
                                    </span>
                                </>
                            )}
                        </Form.Item>
                    </Col>
                </Row>
            );
        }
        return (
            <Row>
                <Col span={12}>
                    <Form.Item label="建议年薪">
                        <div className={styles.formLineWrap}>
                            {renderItem(
                                getFieldDecorator('salarySaveDTO.suggestedYearSalary', {
                                    initialValue: initSuggestedYearSalary,
                                    rules: [
                                        {
                                            required: true,
                                            message: '建议年薪不能为空'
                                        }
                                    ]
                                })(
                                    <InputNumber
                                        // formatter={formatToThreePart}
                                        placeholder="请输入建议年薪"
                                        min={0}
                                        style={{ width: '100%' }}
                                        onChange={value => {
                                            handleChangeSalary('salarySaveDTO.suggestedYearSalary', value);
                                        }}
                                        formatter={val => SalaryYearInput(val, true)}
                                        parser={val => SalaryYearInput(val)}
                                    />
                                ),
                                formatToThreePart(commInfo?.recruitSalaryRecordVO?.suggestedYearSalary)
                            )}
                            <span style={{ marginLeft: 8 }}>
                                {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode}{' '}
                            </span>
                        </div>
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="建议月薪" required>
                        {renderItem(
                            <div className={styles.formLineWrap}>
                                <Form.Item>
                                    {getFieldDecorator('salarySaveDTO.suggestedMonthSalary', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '建议月薪不能为空'
                                            }
                                        ]
                                    })(
                                        <InputNumber
                                            // formatter={formatToThreePart}
                                            placeholder="请输入建议月薪"
                                            onChange={value => {
                                                handleChangeSalary('salarySaveDTO.suggestedMonthSalary', value);
                                            }}
                                            formatter={val => SalaryMonthInput(val, true)}
                                            parser={val => SalaryMonthInput(val)}
                                        />
                                    )}
                                </Form.Item>
                                <span style={{ padding: '0 5px' }}>X</span>
                                <Form.Item>
                                    {getFieldDecorator('salarySaveDTO.suggestedMonthNumber', {
                                        initialValue: commInfo?.recruitSalaryRecordVO?.suggestedMonthNumber || 16,
                                        rules: [
                                            {
                                                required: true,
                                                message: '月份不能为空'
                                            }
                                        ]
                                    })(
                                        <InputNumber
                                            onChange={value => {
                                                handleChangeSalary('salarySaveDTO.suggestedMonthNumber', value);
                                            }}
                                            min={12}
                                        />
                                    )}
                                </Form.Item>
                                <span style={{ marginLeft: 8 }}>
                                    {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode || '月'}
                                </span>
                            </div>,
                            <>
                                {formatToThreePart(commInfo?.recruitSalaryRecordVO?.suggestedMonthSalary) ?? ''}
                                <span style={{ padding: '0 5px' }}>X</span>
                                {commInfo?.recruitSalaryRecordVO?.suggestedMonthNumber ?? ''}
                                <span style={{ marginLeft: 8 }}>
                                    {talentInfo?.employSalaryCurrencyCode || talentInfo?.companyCurrencyCode || '月'}
                                </span>
                            </>
                        )}
                    </Form.Item>
                </Col>
            </Row>
        );
    };

    return (
        <>
            <Row>
                <Col span={12}>
                    <Form.Item label="职位职级">
                        {isEdit
                            ? getFieldDecorator('positionCode', {
                                  initialValue: talentInfo.positionCode,
                                  rules: [
                                      {
                                          required: true,
                                          message: '职位职级不能为空'
                                      }
                                  ]
                              })(<SelectPositionAndRank />)
                            : talentInfo.positionName}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="所属行政机构">{talentInfo.companyName}</Form.Item>
                </Col>
            </Row>
            {renderContent()}
            <Row>
                <Col span={24}>
                    <Form.Item label="薪资参考" {...oneLineLayout}>
                        <SalaryRefTable
                            initialData={{ dataSource, targetCity }}
                            selectCity={selectCity}
                            positionCode={positionCode}
                        />
                    </Form.Item>
                </Col>
            </Row>
        </>
    );
}
